<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增设备管理')"/>
    <th:block th:include="include :: bootstrap-fileinput-css"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content pt-md pb-md">
    <form class="form-horizontal" id="form-device-add">
        <input name="filePath" type="hidden" id="filePath"/>
        <input name="fileName" type="hidden" id="fileName"/>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">设备名称：</label>
            <div class="col-sm-8">
                <input name="deviceName" class="form-control" maxlength="50" required type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">设备种类：</label>
            <div class="col-sm-8">
                <select name="deviceType" class="form-control deviceStatus"
                        th:with="type=${@dict.getType('gy_device_type')}" required>
                    <option value="">请选择</option>
                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                            th:value="${dict.dictValue}"></option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">设备状态：</label>
            <div class="col-sm-8">
                <select name="deviceStatus" id="deviceStatus" class="form-control "
                        th:with="type=${@dict.getType('gy_device_status')}" required>
                    <option value="">请选择</option>
                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                            th:value="${dict.dictValue}"></option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">所属学院：</label>
            <div class="col-sm-8">
                <select name="locationId" class="form-control type"
                        th:with="type=${@dict.getType('gy_locations')}" required>
                    <option value="">请选择</option>
                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                            th:value="${dict.dictValue}"></option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">设备所在位置：</label>
            <div class="col-sm-8">
                <input name="location" class="form-control" maxlength="200" required type="text">
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">设备图片：</label>
            <div class="col-sm-8">
                <input type="file" name="file" id="imgUpload" class="imgFile form-control">
                <span class="help-block m-b-none">导入的文件大小请不要超过10M；</span>
            </div>
        </div>


        <!--arm -->
        <div id="arm">
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">转速：</label>
                <div class="col-sm-8">
                    <input name="rev" class="form-control" type="number" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">1轴：</label>
                <div class="col-sm-8">
                    <input name="one" class="form-control" type="number">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">2轴：</label>
                <div class="col-sm-8">
                    <input name="two" class="form-control" type="number">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">3轴：</label>
                <div class="col-sm-8">
                    <input name="three" class="form-control" type="number">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">4轴：</label>
                <div class="col-sm-8">
                    <input name="four" class="form-control" type="number">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">5轴：</label>
                <div class="col-sm-8">
                    <input name="five" class="form-control" type="number">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">6轴：</label>
                <div class="col-sm-8">
                    <input name="six" class="form-control" type="number">
                </div>
            </div>
        </div>
        <!--arm -->

        <!-- machine -->
        <div id="machine">
            <div class="form-group">
                <label class="col-sm-3 control-label">产量：</label>
                <div class="col-sm-8">
                    <input name="production" class="form-control" type="number">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">循环节拍：</label>
                <div class="col-sm-8">
                    <input name="loopMeter" class="form-control" type="number">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">X轴电机温度：</label>
                <div class="col-sm-8">
                    <input name="xMotoTemperature" class="form-control" type="number">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">X轴电机负载：</label>
                <div class="col-sm-8">
                    <input name="xMotoLoad" class="form-control" type="number">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">主轴电机温度：</label>
                <div class="col-sm-8">
                    <input name="justfyMotoTemperature" class="form-control" type="number">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">主轴电机负载：</label>
                <div class="col-sm-8">
                    <input name="justfyMotoLoad" class="form-control" type="number">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">加工时间：</label>
                <div class="col-sm-8">
                    <input name="processTime"  placeholder="请填写秒数" class="form-control" type="number">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">切削时间：</label>
                <div class="col-sm-8">
                    <input name="cutTime" class="form-control"  placeholder="请填写秒数" type="number">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">开机时间：</label>
                <div class="col-sm-8">
                    <input name="startTime" class="form-control" placeholder="请填写秒数" type="number">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">运行时间：</label>
                <div class="col-sm-8">
                    <input name="runTime" class="form-control" placeholder="请填写秒数" type="number">
                </div>
            </div>

        </div>
        <!-- machine -->

    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: bootstrap-fileinput-js"/>
<script th:inline="javascript">
    var prefix = ctx + "gy/device"
    $("#form-device-add").validate({
        focusCleanup: true
    });

    function submitHandler() {
        if ($.validate.form()) {
            $.operate.save(prefix + "/add", $('#form-device-add').serialize());
        }
    }

    $(function () {
        $("#machine").hide();
        $("#arm").hide();
        $("#common").hide();
        $('.deviceStatus').on('change', function () {
            //获取所有文本内容
            var text = $(".deviceStatus").text();
            //获取选中的文本值
            var selectedText = $(".deviceStatus").find("option:selected").text();
            //获取选中的value值
            var value = $(".deviceStatus").val();
            //获取选中的option的索引值
            var index = $(".deviceStatus").get(0).selectedIndex;
            console.log(text);
            console.log("selectedText:" + selectedText);
            console.log("value:" + value);
            console.log(index);
            if (value == "72") {
                $("#arm").show();
                $("#common").show();
                $("#machine").hide();
            } else if (value == "98") {
                $("#machine").show();
                $("#common").show();
                $("#arm").hide();
            } else {
                $("#machine").hide();
                $("#arm").hide();
                $("#common").hide();
            }
        });
    });



    // ------------------ 文件上传
    $("#imgUpload")
        .fileinput({
            language: "zh", //设置语言
            uploadUrl: ctx + 'common/upload', //上传的地址
            allowedFileExtensions: ["jpg", "png", "jpeg", "bmp", "xls", "doc", "docx", "ppt", "pdf","zip","txt"], //接收的文件后缀
            theme: "fa",      // 主题设置
            //   initialPreview: url1 + filePath + fileName,        // 初始预览区域显示的图片
            initialPreviewAsData: true,
            // initialPreviewConfig: [
            //      { type: "image", fileType: "image", caption: fileName }
            //   ],
            dropZoneEnabled: false,          // 禁止点击预览区域进行文件上传操作
            maxFileCount: 1,                    // 最大上传为 1
            maxFileSize: 51200,
            showUpload: false,             // 不显示上传按钮，选择后直接上传
            previewClass: "uploadPreview",
        })
        .on("change", function () {
            // 清除掉上次上传的图片
            //   $(".uploadPreview").find(".file-preview-frame:first").remove();
            // $(".uploadPreview").find(".kv-zoom-cache:first").remove();
        })
        .on("filebatchselected", function (e, files) {
            $(this).fileinput("upload");             // 文件选择完直接调用上传方法。
        })
        .on("fileuploaded", function (e, data, previewiId, index) {       // 上传完成后的处理
            console.log("fileuploaded")
            var form = data.form,
                files = data.files,
                extra = data.extra,
                response = data.response,        // 响应
                reader = data.reader;          // 文件对象

            if (response.code == "0") {
                $("#fileName").val(response.originalFilename)
                $("#filePath").val(response.url)
                var img = new Image();     // 这里上传的是图片，对图片处理获取图片的分辨率
                img.src = response.url;
                if (img.complete) {
                    $(this).attr("data-displayReso", img.width + "*" + img.height);
                } else {
                    img.onload = function () {
                        $(this).attr("data-displayReso", img.width + "*" + img.height);
                    };
                }
            }
        });

    //------------------
</script>
</body>
</html>
